<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>个人信息</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <style>
        body {
            font-size: 14px;
        }

        footer.aui-nav {
            z-index: 99999;
        }

        header.aui-bar {
            background: #fff;
        }

        .menuRgiht {
            float: right;
            margin-right: 20px;
        }

        .aui-title {
            color: #000;
        }

        .aui-nav .aui-bar-tab .active .aui-iconfont, .aui-nav .aui-bar-tab .active p {
            color: #327afa !important;
        }

        .active {
            color: #327afa !important;
        }

        .aui-tab-nav li.active {
            color: #327afa;
            border-bottom: 2px #327afa solid;
        }

        .aui-bar .aui-iconfont {
            color: #000;
        }

        .walletInfo {
            position: relative;
            width: 100%;
            overflow: hidden;
            background: #f67b86;
            text-align: left;
            padding: 0 0 15px 15px;
        }

        .walletInfo p {
            font-size: 28px;
            color: #fff;
            line-height: 28px;
        }

        .tixianBtn {
            color: #fff;
            border: 1px solid #fff;
            display: inline-block;
            padding: 12px 22px;
            position: absolute;
            right: 15px;
            top: 25px;
            line-height: 12px;
            border-radius: 5px;
        }

        .wallet_set {
            /*position: absolute;*/
            color: #000;
        }

        .headerPic img {
            width: 100%;
        }

        .headerText {
            height: 80px;
            line-height: 80px;
            display: block;
            float: left;
        }

        .name {
            color: #ccc;
        }

        .aui-list-view:after {
            border: none;
        }

        .headerPic {
            overflow: hidden;
            border-radius: 50%;
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
<!--<header class="aui-bar aui-bar-nav aui-border-b">-->
    <!--<div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeFrame()"></div>-->
    <!--<div class="aui-title">-->
        <!--个人信息-->
    <!--</div>-->

<!--</header>-->
<div class="contain">

    <ul class="aui-list-view">
        <li class="aui-list-view-cell" tapmode onclick="changePic(this)">
            <a class="">
                <span class="headerText">头像</span>

                <span class="menuRgiht headerPic validate" name="price">
                    <img src="../../image/touxiang.jpg">
                </span>
            </a>
        </li>
        <li class="aui-list-view-cell" tapmode onclick="changeName()">
            <a class="">
                昵称
                <span class="menuRgiht name validate" name="price">moqin</span>
            </a>
        </li>
    </ul>
</div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<script type="text/javascript">
    apiready = function () {
        api.parseTapmode();
        getStorageAll();
        $(".headerPic img").attr({"src": head_pic})
        $(".name").text(nick_name)
        var header = $api.dom('header');
        var footer = $api.dom('footer');
        $api.fixIos7Bar(header);


        //接收修改个人资料的监听
        api.addEventListener({
            name: 'modifyInfo'
        }, function (ret, err) {
            if (ret && ret.value) {
                getStorageAll();
                $(".name").text(nick_name)
                $(".headerPic").find("img").eq(0).attr("src", head_pic);

            }
        });


    }
    //修改头像
    function changePic(obj) {
        if (!user_id) {
            openTo('login_win');
            return;
        }
        api.actionSheet({
            title: '请选择图片',
            cancelTitle: '取消',
            buttons: ['相册选取', '魅力自拍']
        }, function (ret, err) {
            if (ret.buttonIndex == 1) {
                api.getPicture({
                    sourceType: 'library',
                    encodingType: 'jpg',
                    mediaValue: 'pic',
                    destinationType: 'base64',
                    allowEdit: false,
                    quality: 60,
                    saveToPhotoAlbum: false
                }, function (ret, err) {
                    if (ret) {

                        if (ret.data != "") {
                            goToModifyHeaderPic(ret.data);
                        }

//                        if (!ret.base64Data) {
//                            imgBase64 = '';
//                        } else {
//                            imgBase64 = ret.base64Data;
//                            postData();
//                        }
                    } else {
                        api.toast({
                            msg: err.msg,
                            duration: 2000,
                            location: 'bottom'
                        })
                    }
                })
            } else if (ret.buttonIndex == 2) {
                api.getPicture({
                    sourceType: 'camera',
                    encodingType: 'jpg',
                    mediaValue: 'pic',
                    destinationType: 'base64',
                    allowEdit: true,
                    quality: 60,
                    saveToPhotoAlbum: true
                }, function (ret, err) {
                    if (ret) {

                        if (ret.data != "") {
                            goToModifyHeaderPic(ret.data);
                        }
//                        if (!ret.base64Data) {
//                            imgBase64 = '';
//                        } else {
//                            imgBase64 = ret.base64Data;
//                            postData();
//
//                        }
                    } else {
                        api.toast({
                            msg: "头像上传出错",
                            duration: 2000,
                            location: 'bottom'
                        })
                    }
                })
            }
        })
    }
    function goToModifyHeaderPic(imageData) {
        api.openFrame({
            name: 'updateSingleImage',
            url: 'updateSingleImage.html',
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            },
            bounces: false,
            vScrollBarEnabled: false,
            hScrollBarEnabled: false,
            pageParam: {
                localImageUrl: imageData
            }
        });
    }


    //单击用户名称
    function changeName() {
        api.openFrame({
            name: 'modifyName_frm',
            url: 'modifyName_frm.html',
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            },
            bounces: false,
            vScrollBarEnabled: false,
            hScrollBarEnabled: false,
            animation: {
                type: "push",                //动画类型（详见动画类型常量）
                subType: "from_right",       //动画子类型（详见动画子类型常量）
                duration: 300
            },
            pageParam: {
                name: nick_name,
                user_name: user_name
            }
        });
    }
</script>
</html>
